<script setup lang="ts">
import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";
const props: any = defineProps({
  comProps: {
    type: Object,
  },
});

const audioSrc = ref(
  import.meta.env.VITE_APP_API_URL + "/temporary" + props.comProps.filePath
);
// 视频播放器配置
const audio = ref([
  {
    name: props.comProps.fileName, //歌名
    artist: null, //歌手
    url: audioSrc, //音频文件地址
    cover: null, //音乐封面地址
    lrc: null, // 歌词
  },
]);
const aplayerRef = ref(null);
const aplayerInstance = ref(null);
const emit = defineEmits(["close"]);
const handleClose = () => {
  aplayerInstance.value.destroy();
  emit("close");
};
function addMyAudio() {
  // console.log("aplayerRef.value", aplayerRef.value);
  nextTick(() => {
    aplayerInstance.value = new APlayer({
      container: aplayerRef.value,
      audio: audio.value,
    });
  });
}
onMounted(() => {
  addMyAudio();
});
</script>

<template>
  <div class="AudioPreview">
    <div class="AudioPreview-btn">
      <el-icon @click="handleClose"><Close /></el-icon>
    </div>
    <div id="aplayer" ref="aplayerRef"></div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-scrollbar__view) {
  height: 100%;
}
.AudioPreview {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  right: 80px;
  border: 1px solid var(--el-border-color);
  background: var(--el-bg-color-page);
  .AudioPreview-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    .el-icon {
      margin-left: auto;
      cursor: pointer;
    }
  }
}
</style>
